import {List, Row, Col, Button, Icon, Divider} from "antd";
import React, {Component} from 'react';

const publishData = [];
const receiveData = [];

for (let i = 0; i < 23; i++) {
    publishData.push({
        name: `内容`,
        time: '2018-8-8',
    });

    receiveData.push({
        name: `内容`,
        person: 'xiaoming',
        time: '2018-8-8',
    });
}

export default class AnnouncementList extends Component {
    state = {
        allThings: [],
    };

    render() {
        const publishTitle = (
            <Row type="flex" align="center" style={{marginTop: 16}}>
                <Col span={12}>
                    <h4>名称</h4>
                </Col>
                <Col span={7}>
                    <h4>发送时间</h4>
                </Col>
                <Col span={5}>
                    <h4>详情</h4>
                </Col>
            </Row>
        );

        const receiveTitle = (
            <Row type="flex" align="center" style={{marginTop: 16}}>
                <Col span={10}>
                    <h4>名称</h4>
                </Col>
                <Col span={4}>
                    <h4>发起人</h4>
                </Col>
                <Col span={6}>
                    <h4>发送时间</h4>
                </Col>
                <Col span={4}>
                    <h4>详情</h4>
                </Col>
            </Row>
        );

        const divider = (
            <Divider style={{height: 1}}/>
        );

        return (
            <div>
                <h3 style={{margin: "16px 32px"}}>
                    已发布通知公告：
                    {publishTitle}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={publishData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={12}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={7}>
                                    <div>{item.time}</div>
                                </Col>
                                <Col span={5}>
                                    <Button type="primary" style={{marginLeft: -8}} onClick={this.handleRelativeClick}>管理</Button>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

                <h3 style={{margin: "16px 32px"}}>
                    已接受个人通告：
                    {receiveTitle}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={receiveData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={10}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={4}>
                                    <div>{item.person}</div>
                                </Col>
                                <Col span={6}>
                                    <div>{item.time}</div>
                                </Col>
                                <Col span={4}>
                                    <Button type="primary" style={{marginLeft: -8}} onClick={this.handleRelativeClick}>详情</Button>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

                <h3 style={{margin: "16px 32px"}}>
                    已发送个人通告：
                    {publishTitle}
                    {divider}

                    <List
                        itemLayout="vertical"
                        size="small"
                        pagination={{
                            onChange: (page) => {
                                console.log(page);
                            },
                            pageSize: 3,
                        }}
                        dataSource={publishData}
                        renderItem={(item) => (
                            <Row type="flex" align="center">
                                <Col span={12}>
                                    <div>{item.name}</div>
                                </Col>
                                <Col span={7}>
                                    <div>{item.time}</div>
                                </Col>
                                <Col span={5}>
                                    <Button type="primary" style={{marginLeft: -8}} onClick={this.handleRelativeClick}>详情</Button>
                                </Col>
                                {divider}
                            </Row>
                        )}
                    />
                </h3>

            </div>
        );
    }
}
